<template>
    <view class="page">
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content">修改问题</block>
            <block slot="backText">返回</block>
        </cu-custom>
        <view class="post-title-wrapper">
            <view class="uni-input-wrapper">
                <view class="cu-bar bg-white" style="margin-left: 28rpx;">
                    <view class="action">
                        <text class="cuIcon-titles text-green"></text> 标题
                    </view>
                </view>
            </view>
            <view class="uni-input-title-wrapper">
                <input class="uni-input margin-lr-sm" v-model="inputTitle" placeholder="请输入问题标题"/>
            </view>
        </view>
        <view class="post-content-wrapper">
            <view class="uni-input-wrapper">
                <view class="cu-bar bg-white" style="margin-left: 28rpx;">
                    <view class="action">
                        <text class="cuIcon-titles text-green"></text> 内容
                    </view>
                </view>
            </view>
            <view class="uni-input-content-wrapper margin-bottom-sm">
                <textarea class="uni-input margin-lr-sm" :maxlength="-1" v-model="inputContent" placeholder="请输入问题内容"
                    />
                </view>
        </view>
        <view class="cu-form-group" :key="columns">
            <view class="grid col-3 grid-square flex-sub">
                <view class="bg-img" v-for="(image,index) in images" :key="index">
                    <image :src="image" mode="aspectFill"></image>
                    <view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index">
                        <text class='lg text-green cuIcon-close'></text>
                    </view>
                </view>
                <view class="solids" @click="imageMethod">
                    <text class='cuIcon-cameraadd'></text>
                </view>
            </view>
        </view>
        <view class="uni-button-wrapper" style="position: relative;">
            <view class="margin-tb-sm flex justify-center">
                <button :disabled="enableSend()" class="cu-btn round bg-green block shadow" @click="submit()">修改</button>
            </view>
            <view class="margin-tb-sm flex justify-center">
                <button class="cu-btn round lines-olive block shadow" @click="withDraw()">取消</button>
            </view>
        </view>
        <view>
            <pop-method :show="showImageMethod" @imageready="receiveImage" @closeme="closeImageMethod"></pop-method>
        </view>
    </view>
</template>

<script>
import popMethod from '../createQuestion/pop-method/pop-method.vue';
import {TUTOR_API} from '@/API.js';
import {uploadFiles} from '../request';
import {modifyQuestionData, parseSingleQu} from '../tutor';
export default {
    components: {
        popMethod
    },
    onLoad: function(options) {
        /*
         * question_id: (...)
         * title: (...)
         * content: (...)
         * course_id: (...)
         * chapter_lesson_id: (...)
         * anonymity: (...)
         * images: (...)
         */
        this.question = JSON.parse(decodeURIComponent(options.question));
        this.inputTitle = this.question.title;
        this.inputContent = this.question.content;
        this.images = this.question.images;
    },
    data() {
        return {
            question: null,
            currentCameraSrc: '',
            inputTitle: '',
            inputContent: '',
            images: [],
            showImageMethod: false,
        };
    },
    methods: {
        imageMethod() {
            this.showImageMethod = true;
        },
        closeImageMethod(e) {
            if(e.show === false)
                this.showImageMethod = false;
        },
        receiveImage(e) {
            let received = e.images;
            if(received) {
                this.images = [...this.images, ...received];
            }
        },
        delImg(e) {
            uni.showModal({
                title: '删除',
                content: '确定要删除这张照片吗？',
                cancelText: '取消',
                confirmText: '删除',
                success: res => {
                    if (res.confirm) {
                        this.images.splice(e.currentTarget.dataset.index, 1);
                    }
                }
            });
        },
        withDraw() {
            uni.navigateBack();
        },
        enableSend() {
            let res = this.images.length === 0 && (this.inputTitle.length === 0 || this.inputContent.length === 0);
            return res;
        },
        submit() {
            let imageUrl = uploadFiles(this.images);
            imageUrl.then((res) => {
                let sendMessage = modifyQuestionData(this.question, this.inputTitle, this.inputContent, res);
                this.modifyQu(sendMessage);
            });
        },
        modifyQu: function(sendMessage) {
            uni.request({
                url: TUTOR_API.modifyQu.url,
                method: TUTOR_API.modifyQu.method,
                header: {
                    'http-token': getApp().globalData.user.token
                },
                data: sendMessage,
                success: (res) => {
                    if (res.statusCode == 200) {
                        uni.$emit('reload-question-detail', parseSingleQu(sendMessage));
                        uni.navigateBack(); //修改成功返回上一页面
                    } else {
                        uni.showToast({
                            title: '修改问题失败',
                            icon: 'none'
                        });
                    }
                },
                fail(res) {
                    console.log(res);
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
    $btnSize: 60rpx;
    $input-height: 10em;

    .page{
        height: 100%;
        width: 100%;
        background-color: white;
    }

    .uni-input-wrapper{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-items: center;
        justify-content: flex-start;
        .cu-bar{
            .action{
                font-size: 34upx;
                font-weight: bold;
            }
        }
    }

    .uni-input-title-wrapper {
        min-height: 80rpx;
        input{
            height: 64rpx;
            border-radius: 10rpx;
            padding: 0 20rpx;
            background-color: rgb(250, 250, 250);
        }
    }

    .uni-input-content-wrapper {
        textarea{
            background-color: rgb(250, 250, 250);
            height: $input-height;
            padding: 20rpx;
        }
    }

    /** 必须提升样式优先权(!important) **/
    button[disabled] {
      color: white !important;
      background: #79c242 !important;
    }

    .uni-input {
        width: auto;
        font-size: 30rpx;
        font-family: 'Courier New', Courier, monospace;
    }


    .post-content-wrapper{
        position: relative;
        overflow: hidden;
    }

    .uni-button-wrapper{
        overflow: hidden;
        margin-top: 50rpx;
        background-color: $uni-bg-color;
        width: 100%;
        bottom: 0;
    }

    .cu-btn.block{
        width: 60%;
    }

    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }
</style>
